<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3.筋斗云案例</title>
    <link rel="stylesheet" href="css/nav.css">
    <script src="js/animate.js"></script>
    <script src="js/nav.js"></script>
</head>
<!-- 鼠标经过某个小li，筋斗云跟着到当前小li位置 -->
<!-- 鼠标离开这个小li，筋斗云复原为原来的位置 -->
<!-- 鼠标点击了某个小li，筋斗云就会留在点击这个小li的位置 -->
<!-- 分析 -->
<!-- 1.利用动画函数做动画效果 -->
<!-- 2.原先筋斗云的起始位置是0 -->
<!-- 3.鼠标经过某个小li，把当前小li的offset位置 作为目标值即可 -->
<!-- 4.鼠标离开某个小li，就把目标值设为0 -->
<!-- 5.如果鼠标点击了某个小li，就把当前的位置储存起来，作为筋斗云的起始位置 -->

<body>
    <div id="c_nav" class="c-nav">
        <span class="cloud"></span>
        <ul>
            <li><a href="javascript:;">首页新闻</a></li>
            <li><a href="javascript:;">师资力量</a></li>
            <li><a href="javascript:;">活动策划</a></li>
            <li><a href="javascript:;">企业文化</a></li>
            <li><a href="javascript:;">招聘信息</a></li>
            <li><a href="javascript:;">公司简介</a></li>
            <li><a href="javascript:;">公司风采</a></li>
            <li><a href="javascript:;">联系我们</a></li>
        </ul>
    </div>
</body>

</html>